<template>
  <el-form inline="true">
    <el-form-item>
      <selector
        placeholder="请选择题⽬难度"
        style="width: 200px;"
        v-model="params.difficulty"
        @change="onSearch"
      ></selector>
    </el-form-item>
    <el-form-item>
      <el-input
        placeholder="请您输⼊要搜索的题⽬标题"
        v-model.trim="params.title"
        @keydown.enter="onSearch"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        plain
        @click="onSearch"
      >搜索</el-button>
      <el-button
        plain
        type="info"
        @click="onReset"
      >重置</el-button>
      <el-button
        plain
        type="primary"
        :icon="Plus"
        @click="onAdd"
      >添加题⽬</el-button>
    </el-form-item>
  </el-form>
  <el-table
    height="526px"
    :data="questionList"
  >
    <el-table-column
      prop="questionId"
      width="180px"
      label="题⽬id"
    />
    <el-table-column
      prop="title"
      label="题⽬标题"
    />
    <el-table-column
      prop="difficulty"
      label="题⽬难度"
      width="90px"
    >
      <template #default="{ row }">
        <div
          v-if="row.difficulty === 1"
          style="color:#3EC8FF;"
        >简单</div>
        <div
          v-if="row.difficulty === 2"
          style="color:#FE7909;"
        >中等</div>
        <div
          v-if="row.difficulty === 3"
          style="color:#FD4C40;"
        >困难</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="createName"
      label="创建⼈"
      width="140px"
    />
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="180px"
    />
    <el-table-column
      label="操作"
      width="100px"
      fixed="right"
    >
      <template #default="{ row }">
        <el-button
          type="text"
          @click="onEdit(row.questionId)"
        >编辑
        </el-button>
        <el-button
          type="text"
          class="red"
          @click="onDelete(row.questionId)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    ref="paginationRef"
    size="small"
    background
    :page-sizes="[5, 10, 20, 30]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalNum"
    class="mt-4"
    v-model:current-page="params.pageNum"
    v-model:page-size="params.pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <QuestionDrawer
    ref="questionDrawerRef"
    @success="onSuccess"
  />

</template>
<script setup>
  import { Plus } from "@element-plus/icons-vue"
  import { ElMessageBox, ElMessage } from 'element-plus'
  import Selector from "@/components/QuestionSelector.vue"
  import { reactive, ref } from 'vue'
  import { getQuestionListService, deleteQuestionByIdService } from "@/apis/questionApi"
  import QuestionDrawer from '@/components/QuestionDrawer.vue'
  import { OPERATION_TYPE, PAGE_VALUE } from '@/constants/CRUDConstants'


  /** 题目列表相关内容 **/
  const params = reactive({
    pageNum: PAGE_VALUE.PAGE_NUM,
    pageSize: PAGE_VALUE.PAGE_SIZE,
    title: "",
    difficulty: ""
  })

  const totalNum = ref(0) // 总个数
  const questionList = ref([])
  async function getQuestionList() {
    const { rows, total } = await getQuestionListService(params)
    questionList.value = rows
    totalNum.value = total
  }
  getQuestionList()

  let oldSize = params.pageSize;
  function handleCurrentChange(newPage) {
    getQuestionList()
  }

  function handleSizeChange(newSize) {
    // 从客户角度出发 由多变少 那么就去当前页面的第一个值的页面 反之亦然
    const curFirstNum = (params.pageNum - 1) * oldSize + 1 // 当前页面的第一个值在总数中的位置
    params.pageNum = Math.ceil(curFirstNum / newSize)
    oldSize = newSize
    getQuestionList()
    console.log('true');
  }

  function onSearch() {
    params.pageNum = 1
    getQuestionList()
  }

  function onReset() {
    params.pageNum = PAGE_VALUE.PAGE_NUM
    params.pageSize = PAGE_VALUE.PAGE_SIZE
    params.title = ""
    params.difficulty = ""
    getQuestionList()
  }

  async function onDelete(questionId) {
    try {
      await ElMessageBox.confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await deleteQuestionByIdService(questionId)
      ElMessage.success('删除成功')
      if (questionList.value.length === 1 && params.pageNum > 1) {
        params.pageNum--
      }

      getQuestionList()
    } catch (error) {

    }
  }

  /**  抽屉相关内容  **/
  const questionDrawerRef = ref(null)
  const paginationRef = ref()
  function onAdd() {
    console.log(paginationRef.value);
    console.log(questionDrawerRef.value);

    questionDrawerRef.value.open()
  }

  function onSuccess(type) {
    if (type === OPERATION_TYPE.ADD) {
      params.pageNum = 1
    }
    getQuestionList()
  }

  function onEdit(questionId) {
    questionDrawerRef.value.open(questionId)
  }



</script>